<template>
  <view class="case-detail-container py-[20rpx] box-border">
    <view class="p-[30rpx] box-border bg-white">
      <view class="">
        <view
          class="serial-id flex flex-row items-center justify-between mb-[20rpx]"
        >
          <view class="flex items-start text-[#222222] text-[32rpx]">
            <view class="whitespace-nowrap">案件编号：</view>
            <view
              class="grow max-w-full overflow-hidden text-ellipsis line-clamp-1"
              >{{ info.serialId }}</view
            >
          </view>
          <view
            class="text-[24rpx] whitespace-nowrap ml-[10rpx]"
            :style="
              info.status == 0
                ? 'color: #1E92F0;'
                : info.status == 1
                ? 'color: #FF6A2A;'
                : info.status == 2
                ? 'color: #00B578;'
                : ''
            "
            >{{
              info.status == 0
                ? "已排期"
                : info.status == 1
                ? "审核中"
                : info.status == 2
                ? "已完结"
                : ""
            }}</view
          >
        </view>
        <view class="text-[#666666] text-[28rpx]">
          <view class="flex items-start gap-[10rpx]">
            <view class="whitespace-nowrap">立案案由：</view>
            <view class="grow max-w-full overflow-hidden text-ellipsis">{{
              info.casePoints
            }}</view>
          </view>
          <view class="desc-list">
            <view class="title">立案类型：</view>
            <view
              class="max-w-full overflow-hidden text-ellipsis line-clamp-1"
              >{{ info.type }}</view
            >
          </view>
          <view class="desc-list">
            <view class="title">立案人：</view>
            <view>{{ info.draftsman }}</view>
          </view>
          <view class="desc-list">
            <view class="title">立案日期：</view>
            <view>{{ info.time }}</view>
          </view>
        </view>
      </view>
      <view
        class="border-t-[1rpx] border-t-solid border-t-[#E8E9EC] my-[30rpx]"
      ></view>
      <view class="flex flex-row items-center justify-between relative">
        <view
          class="tab-line bg-[#1E92F0] rounded-[3rpx] w-[42rpx] h-[8rpx]"
          :style="tabLineStyle"
        ></view>
        <template v-for="(item, index) in tabMenus" :key="index">
          <view
            :style="
              currentTab == item.id
                ? 'color:#1E92F0;font-size: 32rpx;'
                : 'color:#666666;font-size: 28rpx;'
            "
            @click="onChangeTab(item.id)"
            >{{ item.name }}</view
          >
        </template>
      </view>
    </view>
    <view class="content mx-[30rpx] mt-[20rpx]">
      <caseProgress v-if="currentTab === 0"></caseProgress>
      <caseDetail v-if="currentTab === 1"></caseDetail>
      <caseContact v-if="currentTab === 2"></caseContact>
      <caseEvidence v-if="currentTab === 3"></caseEvidence>
    </view>
    <uni-fab
      ref="fabRef"
      horizontal="right"
      direction="horizontal"
      :pattern="{
        color: '#0C2F5B',
      }"
      :content="moreBtn"
      @fabClick="fabClick"
      @trigger="trigger"
    ></uni-fab>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import caseProgress from "./components/caseProgress.vue";
import caseDetail from "./components/caseDetail.vue";
import caseContact from "./components/caseContact.vue";
import caseEvidence from "./components/caseEvidence.vue";

// 响应式数据
const info = ref({
  serialId: "(2024)渝0107民初3636号",
  casePoints:
    "民间借贷纠纷民间借贷纠纷民间借贷纠纷民间借贷纠纷民间借贷纠纷民间借贷纠纷",
  type: "民事",
  draftsman: "黛玉",
  time: "2025-03-05",
  status: 0, // 0 已排期 1 审核中 2已完结
});
const tabMenus = ref([
  {
    id: 0,
    name: "案件进度",
  },
  {
    id: 1,
    name: "案件详情",
  },
  {
    id: 2,
    name: "案件联系",
  },
  {
    id: 3,
    name: "案件证据",
  },
]);
const currentTab = ref(0);
const tabLineStyle = ref("transform: translateX(45rpx)");
const moreBtn = reactive([
  {
    iconPath: "/static/images/icon-apply.png",
    selectedIconPath: "/static/images/icon-apply.png",
    text: "巡回审判申请",
    active: false,
  },
  {
    iconPath: "/static/images/icon-evidence.png",
    selectedIconPath: "/static/images/icon-evidence.png",
    text: "添加证据",
    active: false,
  },
]);
const fabRef = ref(null);

// 初始化加载
onMounted(() => {});

const onChangeTab = (tabIndex: any) => {
  currentTab.value = tabIndex;
  if (tabIndex == 0) {
    tabLineStyle.value = "transform: translateX(45rpx)";
  }
  if (tabIndex == 1) {
    tabLineStyle.value = "transform: translateX(230rpx)";
  }
  if (tabIndex == 2) {
    tabLineStyle.value = "transform: translateX(420rpx)";
  }
  if (tabIndex == 3) {
    tabLineStyle.value = "transform: translateX(605rpx)";
  }
};
const fabClick = () => {
  console.log(fabRef.value);
};
const trigger = (e: any) => {
  if (e.index == 0) {
    uni.navigateTo({
      url: "/subPages/home/apply/index",
    });
  }
  if (e.index == 1) {
    uni.navigateTo({
      url: "/subPages/home/evidence/add",
    });
  }
  fabRef.value.close();
};
</script>

<style lang="scss" scoped>
.case-detail-container {
  :deep(.uni-fab__circle) {
    background: linear-gradient(317deg, #1e92f0 0%, #93ccff 100%) !important;
  }
  .desc-list {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 10rpx;
    .title {
      white-space: nowrap;
    }
  }
  .tab-line {
    position: absolute;
    top: 45rpx;
    transition-property: color, -webkit-transform;
    transition-property: transform, color;
    transition-property: transform, color, -webkit-transform;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
  }
  :deep(.uni-fab__content) {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
  }
  :deep(.uni-fab__item-image) {
    width: 60rpx;
    height: 60rpx;
  }
  :deep(.uni-fab__item) {
    width: auto;
  }
  :deep(.uni-fab__item:first-child) {
    margin-left: 20rpx;
  }
  :deep(.uni-fab__item:last-child) {
    margin-right: 50rpx;
  }
  :deep(.uni-fab__content--other-platform) {
    box-shadow: none;
  }
}
</style>
